import './Theme.scss'
import { Button } from 'antd'
import { useState } from 'react'
import { useMount } from 'ahooks'
import PropTypes from 'prop-types'
import { useRequest } from 'alova'

import { Http } from '../../Api'
import { ThemeIsEnabled, FontWeight, FontFamily } from '../../Config/typelist'
import { UseConfigSection } from '../../Template/FormTemplate'
import { GetIndexedDB, PutIndexedDB } from '../../Utils/IndexedDB'
import { ThemeUserTrigger, ThemeUserAvatar } from '../../Config/themeList'


const ThemeUser = ({ Off }) => {
    ThemeUser.propTypes = { Off: PropTypes.func }
    const [data, setData] = useState()

    const UserList = [
        { label: '样式一', value: 'UserA01' },
    ]

    const UserOption = [
        { label: '个人中心', value: 'A01' },
        { label: '退出登录', value: 'A02' },
        { label: '帮助信息', value: 'A03' },
        { label: '进入大屏', value: 'A04' },
    ]

    const list = [
        { key: 999, uuid: 'ThemeSet', label: '渲染样式', type: 'SelectTemp', name: 'user', options: UserList },
        { key: 100, uuid: 'UserSet', label: '操作功能', type: 'SelectMultipleTemp', name: 'list', options: UserOption },
        { key: 101, uuid: 'UserSet', label: '触发方式', type: 'SelectTemp', name: 'user', options: UserList },
        { key: 102, uuid: 'UserSet', label: '开启遮罩', type: 'RadioTemp', name: 'blurState', options: ThemeIsEnabled },
        { key: 103, uuid: 'UserSet', label: '遮罩颜色', type: 'ColorPickerTemp', name: 'blurColor' },
        { key: 104, uuid: 'UserSet', label: '遮罩高斯', type: 'InputNumberTemp', name: 'blurFilter' },
        { key: 105, uuid: 'UserSet', label: '触发方式', type: 'SelectTemp', name: 'trigger', options: ThemeUserTrigger },
        { key: 106, uuid: 'UserSet', label: '开启头像', type: 'RadioTemp', name: 'avatarStatus', options: ThemeIsEnabled },
        { key: 107, uuid: 'UserSet', label: '头像类型', type: 'SelectTemp', name: 'avatarType', options: ThemeUserAvatar },
        { key: 108, uuid: 'UserSet', label: '头像大小', type: 'InputNumberTemp', name: 'avatarSize' },
        { key: 109, uuid: 'UserSet', label: '头像背景', type: 'ColorPickerTemp', name: 'avatarBackColor' },
        { key: 110, uuid: 'UserSet', label: '头像文字颜色', type: 'ColorPickerTemp', name: 'avatarTextColor' },
        { key: 111, uuid: 'UserSet', label: '头像文字加粗', type: 'SelectTemp', name: 'avatarTextWeight', options: FontWeight },
        { key: 112, uuid: 'UserSet', label: '头像文字字体', type: 'SelectTemp', name: 'avatarTextFamily', options: FontFamily },
        { key: 113, uuid: 'UserSet', label: '角色信息', type: 'RadioTemp', name: 'roleStatus', options: ThemeIsEnabled },
        { key: 114, uuid: 'UserSet', label: '角色字号', type: 'InputNumberTemp', name: 'roleSize' },
        { key: 115, uuid: 'UserSet', label: '角色字色', type: 'ColorPickerTemp', name: 'roleColor' },
        { key: 116, uuid: 'UserSet', label: '角色加粗', type: 'SelectTemp', name: 'roleWeight', options: FontWeight },
        { key: 117, uuid: 'UserSet', label: '角色字体', type: 'SelectTemp', name: 'roleFamily', options: FontFamily },
        { key: 118, uuid: 'UserSet', label: '用户信息', type: 'RadioTemp', name: 'userStatus', options: ThemeIsEnabled },
        { key: 119, uuid: 'UserSet', label: '用户字号', type: 'InputNumberTemp', name: 'userSize' },
        { key: 120, uuid: 'UserSet', label: '用户字色', type: 'ColorPickerTemp', name: 'userColor' },
        { key: 121, uuid: 'UserSet', label: '用户加粗', type: 'SelectTemp', name: 'userWeight', options: FontWeight },
        { key: 122, uuid: 'UserSet', label: '用户字体', type: 'SelectTemp', name: 'userFamily', options: FontFamily },
    ]

    useMount(async () => {
        const Theme = await GetIndexedDB('theme')
        setData(Theme)
    })

    const { send: posData } = useRequest((params) => Http({ url: 'posSaveJsonInfoBy', params, path: ['theme/theme'] }), { immediate: false })

    const onSubmit = async () => {
        const params = JSON.stringify(JSON.stringify(data))
        posData(params).then(async () => {
            await PutIndexedDB('theme', data)
            window.location.reload()
        })
    }

    if (data) {
        return (
            <div className='Theme'>
                {UseConfigSection(data, list)}
                <div className='Button'>
                    <Button type='primary' danger onClick={Off}>取消</Button>
                    <Button type='primary' onClick={onSubmit}>保存</Button>
                </div>
            </div>
        )
    }
};

export default ThemeUser;